<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import iconMarkerLine from '@/assets/svgs/lineCar.svg'
import iconMarkerQue from '@/assets/svgs/queCar.svg'
import { defineComponent } from 'vue'
import mitt from '@/utils/mitter'
window._AMapSecurityConfig = {
  securityJsCode: '68aefaa84ff4d8647ef9953d749ac788'
}

export default defineComponent({
  name: 'Gmap',
  // 启用了类型推导
  props: {
    name: String,
    id: [Number, String]
    // data: [Object]
  },
  data() {
    return {
      infoWindow: null,
      currentLantype: 1,
      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      map: null,
      //地图加载参数
      AMapLoader: {
        // key: '723cd0dfe8feaace75ee38d46f2f3efd', // 申请好的Web端开发者Key，首次调用 load 时必填
        key: '9bc693986eb0e969874e00c7973d447f',
        // version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Geolocation', 'AMap.CitySearch', 'AMap.Geocoder'] // 需要使用的插件列表，如比例尺'AMap.Scale'等
      },
      //地图绘制参数

      //更多参数可访问 https://lbs.amap.com/api/jsapi-v2/documentation#map
      parameter: {
        zoom: 6, //级别
        center: [106.2529, 39.542], //中心点坐标
        viewMode: '3D' //使用3D视图
      },
      geolocation: undefined,
      circleAmap: {
        circleRadius: 0,
        lat: null,
        lng: null
      },
      markerRadius: undefined,
      isFlag: false
    }
  },
  watch: {
    // 每当 经纬度 改变时，这个函数就会执行
    circleAmap: {
      handler(newValue) {
        //查询地理位置
        LOG.Log([newValue.lat, newValue.lng])
        this.gaoDeGeocoder([newValue.lng, newValue.lat])
        // this.addcircle()
        // this.map.setFitView()
      },
      deep: true
    }
  },
  //地图初始化应该在地图容器div已经添加到DOM树之后,所以放到mounted里面
  created() {
    this.initMap()
    mitt.on('handradiusChange', (val) => {
      this.circleAmap.circleRadius = val
    })
    // mitt.on('handpointNameChange', (val) => {
    //   LOG.Log('handpointNameChange:', val)
    //   this.circleAmap.circleRadius = val
    //   setTimeout(() => {
    //     this.gaoGeocoder(val)
    //   }, 200)
    // })
    this.circleAmap.circleRadius = 200
  },
  methods: {
    changeAreaType(val) {
      this.currentLantype = val
    },
    searchPOsition(val) {
      setTimeout(() => {
        this.gaoGeocoder(val)
      }, 200)
    },
    drawCircle(val) {
      this.circleAmap.lat = val.lat
      this.circleAmap.lng = val.lng
      setTimeout(() => {
        this.addcircle()
        this.map.setFitView()
      }, 200)
    },
    changeRadius(val) {
      this.circleAmap.circleRadius = val
      setTimeout(() => {
        this.addcircle()
        this.map.setFitView()
      }, 200)
    },
    //销毁重绘地图
    destroyMap() {
      // this.map && this.map.destroy()
      // this.initMap()
      this.map.clearMap()
      //清除数据

      this.isFlag = false
    },
    //切换鼠标样式
    switchCursor() {
      this.map.setDefaultCursor('crosshair')
      this.isFlag = true
    },
    // 画圆
    addcircle() {
      //jinting
      let fillcolor = '#E50B25'
      let strokeColor = '#E50B25'
      if (this.currentLantype == 1) {
        //paidui
        fillcolor = '#1B84D0'
        strokeColor = '#1B84D0'
      }
      // 构造矢量圆形
      this.markerRadius = new AMap.Circle({
        center: new AMap.LngLat(this.circleAmap.lng, this.circleAmap.lat), // 圆心位置
        radius: this.circleAmap.circleRadius, //半径
        strokeColor: strokeColor, //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 2, //线粗细度
        fillColor: fillcolor, //填充颜色
        fillOpacity: 0.55 //填充透明度
      })
      //清楚圆
      this.clearMarker()
      this.map.add(this.markerRadius)

      mitt.emit('showRadiusFlag')
      // this.map.setFitView()
    },
    //自适应
    setFitView() {
      this.map.setFitView()
    },
    // 清除 marker
    clearMarker() {
      LOG.Log('map实例：', this.map)
      this.map.clearMap()
    },
    //获取定位成功的回调函数
    onComplete(result) {
      //做一些事情，比如将位置信息进行处理展示在坐标点上
    },
    //获取定位失败的回调函数
    onError(result) {
      //定位失败，调用ip定位方式
    },

    initMap() {
      AMapLoader.load(this.AMapLoader)
        .then((AMap) => {
          this.map = new AMap.Map('container', this.parameter)
          this.geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量
            offset: [10, 20],
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            // 定位按钮的排放位置,  RB表示右下
            position: 'RB'
          })

          this.map.on('click', (e) => {
            if (!this.isFlag) {
              return false
            }
            this.circleAmap.lng = e.lnglat.getLng()
            this.circleAmap.lat = e.lnglat.getLat()
            this.addcircle()
            mitt.emit('handlatlngChange', { lng: this.circleAmap.lng, lat: this.circleAmap.lat })
          })
          this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) })
        })
        .catch((e) => {
          console.log(e)
        })
    },
    //显示所有车辆信息，传入list 遍历渲染
    createGaoMarkerGroup(data) {
      let datas = !!data && data.waybillGpsList
      // 构造点标记
      if (!!datas) {
        datas.forEach((el, i) => {
          let marker = new AMap.Marker({
            icon: new AMap.Icon({
              image: datas[i].waybillStatus == 40010 ? iconMarkerQue : iconMarkerLine,
              imageSize: new AMap.Size(35, 35)
            }),
            // icon: iconMarker,
            label: {
              content: true && `<div class='marker-label'>${datas[i].vehicleNo}</div>`,
              offset: [120, 80]
            },
            position: [datas[i].lon, datas[i].lat]
          })
          marker.on('click', this.markerClick)
          marker.setExtData(data)
          this.map.add(marker)
        })
      }
      this.map.setFitView()
    },
    //显示所有车辆信息，传入list 遍历渲染
    createGaoMarkerSimple(datas) {
      // 构造点标记
      if (!!datas) {
        let marker = new AMap.Marker({
          icon: new AMap.Icon({
            image: iconMarkerLine,
            imageSize: new AMap.Size(35, 35)
          }),
          label: {
            content: true && `<div class='marker-label'>${datas.vehicleNo}</div>`,
            offset: [120, 80]
          },
          position: [datas.lon, datas.lat]
        })
        // marker.on('click', this.markerClick)
        marker.setExtData(datas)
        this.map.add(marker)
      }
      this.map.setFitView()
    },
    //marker点击事件
    markerClick(e) {
      //e.target.getExtData() 获取点击的marker属性 然后显示当前marker详情
      let data = e.target.getExtData()
      let content = `<p><b>运单：</b>${data.waybillGpsList[0].waybillNo}</p>
      <p><b>客户：</b>${data.queueConfigContentName}</p>
      <p><b>车牌号：</b>${data.waybillGpsList[0].vehicleNo}</p>
      <p><b>时间：</b>${data.waybillGpsList[0].gpsTime}</p>`

      this.infoWindow.setContent(content)
      this.infoWindow.open(this.map, e.target.getPosition())
    },

    // 地点定位标记 传入经纬度
    createGaoMarker(latlng) {
      // 创建一个 Marker 实例：
      const marker = new AMap.Marker({
        position: latlng // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      })

      // 将创建的点标记添加到已有的地图实例：
      this.map.add(marker)
      this.map.setFitView([marker])
    },
    /** 逆地址解析 #param  jingweidu  */
    gaoDeGeocoder(val) {
      var geocoder = new AMap.Geocoder()

      geocoder.getAddress(val, (status, result) => {
        LOG.Log(result, status, val, '泥地里解析')
        if (result.info === 'OK') {
          mitt.emit('handleweizhi', result.regeocode.formattedAddress)
          mitt.emit('handleweizhicode', result.regeocode.addressComponent.adcode)
        } else {
          LOG.Log('根据地址查询位置失败')
        }
      })
    },
    // 地址解析 传入具体地理名称  地点定位标记 传入经纬度
    gaoGeocoder(val) {
      var geocoder = new AMap.Geocoder()
      geocoder.getLocation(val, (status, result) => {
        if (status === 'complete' && result.geocodes.length) {
          var lnglat = result.geocodes[0].location
          this.createGaoMarker(lnglat)
        } else {
          LOG.Log('根据地址查询位置失败')
        }
      })
    }
  }
})
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;

  &::v-deep .amap-logo {
    display: none !important;
  }
  &::v-deep .amap-copyright {
    opacity: 0;
  }
  &::v-deep .amap-marker-label {
    border: 1px solid #4fb3c9 !important;
    background: #a3ccff !important;
  }
}
</style>
